<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美食派系统-商品列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="media/js/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<div class="layui-container">

		<table class="layui-hide" id="test" lay-filter="test"></table>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>

			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="dropstack">下架</a>
		</script>


	<script src="media/layui/layui.js"></script>

	<script>
		layui.use(['table', 'laydate', "laypage", "layer", 'carousel', 'upload', 'element'], function(){
			//初始化table组件对象
			var table = layui.table
					,laypage =layui.laypage//分页的组件
					,layer = layui.layer//弹框
					,laydate = layui.laydate//日期组件
					,element = layui.element;//元素的操作


			//渲染table
			table.render({
				//z找到table  id叫test的组件
				elem: '#test'
				,id:"transferTable"
				,url:'meishipai/product-info/list'
				,totalRow: true
				//这个很关键，就是解析 json数据库中数据的 一定要注意键值
				,cols: [[
					{field:'productId', title:'商品id', width:100,  unresize: true, sort: true, fixed:"left"}
					,{field:'productName', title:'商品名称'}
					,{field:'productPrice', title:'商品价格'}
					,{field:'productIcon', title:'图片地址'}
					,{field:'productStatus', title:'商品转态',templet: function(item){
							// 商品状态,0正常1下架
							var str = ""
							if (item.productStatus == 0){
								str = "正常";
							}else if (item.productStatus ==1){
								str = "下架";
							}

							return '<span style="color: #c00;">'+str +'</span>'
						}}
					,{field:'categoryType', title:'类目',templet: function(data){

							return '<span style="color: #c00;">'+data.categoryName +'</span>'
						}}
					,{field:'createTime', title:'创建时间'}
					,{field:'updateTime', title:'更新时间'}
					,{fixed: 'right', title:'操作',  width:150, align:'center', toolbar: '#barDemo'}
				]]
				,page: true //分页开启
			});
			//搜索框有效果的情况
			var  active = {
				reload: function(){
					//执行重载
					table.reload('transferTable', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
					}); 
				}
			};

			//监听工具条
			table.on('tool(test)', function(obj){
				var data = obj.data;
				if(obj.event === 'edit'){

					window.location.href="productediter.html?productId="+data.productId;
				} else if(obj.event === 'dropstack'){
					$.ajax({
						type: 'get',
						url:'meishipai/product-info/updateGrade.do?productId='+data.productId,
						data:$("#form1").serialize(),
						dataType: 'json',
						success:function (date) {
							if (date.code == 0) {
								alert(date.info);
                                window.location = "productlist.html";
								//window.parent.location.reload();
							} else {
								alert("修改失败！")
							}
						}
					})

				} else if(obj.event === 'edit'){
					$("#id").attr('value', data.id);
				}
			});

			$('.serchDiv .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			$('.demoTable .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

		});


	</script>
</body>
</html>
